<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>博客主页</title>
<style type="text/css">
.box1 {
	position: absolute;
	width: 15%;
	height: 300px;
	top: 200px;
	left: 50px;
	background-color: #FFFFCC;
	border: 1px solid #ccc;
}

.box2 {
	position: absolute;
	width: 60%;
	height: 1950px;
	top: 60px;
	left: 400px;
	border: 1px solid #ccc;
}

.hiding {
	position: relative;
	top: 1940px;
	left: 900px;
	background-color: #E0FFFF;
}

.box3 {
	position: absolute;
	width: 60%;
	height: 300px;
	top: 2050px;
	left: 400px;
	border: 1px solid #ccc;
	display: none;
}

.box4 {
	position: absolute;
	width: 100%;
	height: 20px;
	top: 2380px;
	background-color: #ccc;
}

a {
	text-decoration: none;
}

ul {
	float: left;
}

li {
	list-style: none;
	width: 1060px;
	height: 95px;
	border-bottom: 1px dashed #ccc;
}

li div {
	margin-right: 40px;
	float: left;
}
</style>
</head>
<body>
	<div style="float: right;">
		<a href="blog_body.html">首页</a>&nbsp;&nbsp;&nbsp; <a
			href="blog_login.html">退出</a>
	</div>
	<div class="box1">
		<center>
			<img src="" />
			<div id="name"></div>
		</center>
	</div>
	<center>
		<h1 style="color: #CC3333; font-family: 楷体">博客列表</h1>
	</center>
	<div style="background-color: #99FFCC;" id="contentview" class="box2"
		width="50%">
		<ul>
			<li><div>
					<img id="img1" src="">
				</div>
				<div>
					<a id="a1" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s1"></span>
				</div></li>
			<li><div>
					<img id="img2" src="">
				</div>
				<div>
					<a id="a2" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s2"></span>
				</div></li>
			<li><div>
					<img id="img3" src="">
				</div>
				<div>
					<a id="a3" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s3"></span>
				</div></li>
			<li><div>
					<img id="img4" src="">
				</div>
				<div>
					<a id="a4" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s4"></span>
				</div></li>
			<li><div>
					<img id="img5" src="">
				</div>
				<div>
					<a id="a5" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s5"></span>
				</div></li>
			<li><div>
					<img id="img6" src="">
				</div>
				<div>
					<a id="a6" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s6"></span>
				</div></li>
			<li><div>
					<img id="img7" src="">
				</div>
				<div>
					<a id="a7" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s7"></span>
				</div></li>
			<li><div>
					<img id="img8" src="">
				</div>
				<div>
					<a id="a8" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s8"></span>
				</div></li>
			<li><div>
					<img id="img9" src="">
				</div>
				<div>
					<a id="a9" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s9"></span>
				</div></li>
			<li><div>
					<img id="img10" src="">
				</div>
				<div>
					<a id="a10" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s10"></span>
				</div></li>
			<li><div>
					<img id="img11" src="">
				</div>
				<div>
					<a id="a11" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s11"></span>
				</div></li>
			<li><div>
					<img id="img12" src="">
				</div>
				<div>
					<a id="a12" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s12"></span>
				</div></li>
			<li><div>
					<img id="img13" src="">
				</div>
				<div>
					<a id="a13" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s13"></span>
				</div></li>
			<li><div>
					<img id="img14" src="">
				</div>
				<div>
					<a id="a14" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s14"></span>
				</div></li>
			<li><div>
					<img id="img15" src="">
				</div>
				<div>
					<a id="a15" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s15"></span>
				</div></li>
			<li><div>
					<img id="img16" src="">
				</div>
				<div>
					<a id="a16" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s16"></span>
				</div></li>
			<li><div>
					<img id="img17" src="">
				</div>
				<div>
					<a id="a17" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s17"></span>
				</div></li>
			<li><div>
					<img id="img18" src="">
				</div>
				<div>
					<a id="a18" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s18"></span>
				</div></li>
			<li><div>
					<img id="img19" src="">
				</div>
				<div>
					<a id="a19" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s19"></span>
				</div></li>
			<li><div>
					<img id="img20" src="">
				</div>
				<div>
					<a id="a20" href="" target="_blank"></a><br /> <br /> <br /> <span
						id="s20"></span>
				</div></li>


		</ul>
	</div>
	<div class="box3">
		<form id="write-form" method="post">
			<ul>
				<li>标&nbsp;&nbsp;&nbsp;&nbsp;题：<input type="text" name="title"
					style="width: 400px; height: 30px; font-size: 22px" /></li>
				<li>内&nbsp;&nbsp;&nbsp;&nbsp;容：<textarea id="editor"
						name="content" rows="10" cols="50"></textarea></li>
			</ul>
			<div style="text-align: center;">
				<button id="writeblog" type="submit">提交</button>
				<button type="reset">取消</button>
			</div>
		</form>
	</div>
	<!-- 	<button class="hiding" type="submit" style="color: #1E90FF;">写博客</button> -->
	<div class="box4" style="font-size: 微软雅黑;">
		<center>Copyright © 2015-2016 All Rights Reserved xx 版权所有</center>
	</div>


	<script type="text/javascript" src="/static/js/jquery.min.js"></script>
	<script type="text/javascript"
		src="/static/js/ueditor/ueditor.config.js"></script>
	<script type="text/javascript"
		src="/static/js/ueditor/ueditor.all.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$.get('/blog_body', function(data) {
				$('#img1').attr("src", data.avt1);
				$('#a1').html(data.title1);
				$('#a1').attr("href","http://localhost:8080/blog_content?id="+data.id1);
				$('#s1').html(data.publish_time1);
				$('#img2').attr("src", data.avt2);
				$('#a2').html(data.title2);
				$('#a2').attr("href","http://localhost:8080/blog_content?id="+data.id2);
				$('#s2').html(data.publish_time2);
				$('#img3').attr("src", data.avt3);
				$('#a3').html(data.title3);
				$('#a3').attr("href","http://localhost:8080/blog_content?id="+data.id3);
				$('#s3').html(data.publish_time3);
				$('#img4').attr("src", data.avt4);
				$('#a4').html(data.title4);
				$('#a4').attr("href","http://localhost:8080/blog_content?id="+data.id4);
				$('#s4').html(data.publish_time4);
				$('#img5').attr("src", data.avt5);
				$('#a5').html(data.title5);
				$('#a5').attr("href","http://localhost:8080/blog_content?id="+data.id5);
				$('#s5').html(data.publish_time5);
				$('#img6').attr("src", data.avt6);
				$('#a6').html(data.title6);
				$('#a6').attr("href","http://localhost:8080/blog_content?id="+data.id6);
				$('#s6').html(data.publish_time6);
				$('#img7').attr("src", data.avt7);
				$('#a7').html(data.title7);
				$('#a7').attr("href","http://localhost:8080/blog_content?id="+data.id7);
				$('#s7').html(data.publish_time7);
				$('#img8').attr("src", data.avt8);
				$('#a8').html(data.title8);
				$('#a8').attr("href","http://localhost:8080/blog_content?id="+data.id8);
				$('#s8').html(data.publish_time8);
				$('#img9').attr("src", data.avt9);
				$('#a9').html(data.title9);
				$('#a9').attr("href","http://localhost:8080/blog_content?id="+data.id9);
				$('#s9').html(data.publish_time9);
				$('#img10').attr("src", data.avt10);
				$('#a10').html(data.title10);
				$('#a10').attr("href","http://localhost:8080/blog_content?id="+data.id10);
				$('#s10').html(data.publish_time10);
				$('#img11').attr("src", data.avt11);
				$('#a11').html(data.title11);
				$('#a11').attr("href","http://localhost:8080/blog_content?id="+data.id11);
				$('#s11').html(data.publish_time11);
				$('#img12').attr("src", data.avt12);
				$('#a12').html(data.title12);
				$('#a12').attr("href","http://localhost:8080/blog_content?id="+data.id12);
				$('#s12').html(data.publish_time12);
				$('#img13').attr("src", data.avt13);
				$('#a13').html(data.title13);
				$('#a13').attr("href","http://localhost:8080/blog_content?id="+data.id13);
				$('#s13').html(data.publish_time13);
				$('#img14').attr("src", data.avt14);
				$('#a14').html(data.title14);
				$('#a14').attr("href","http://localhost:8080/blog_content?id="+data.id14);
				$('#s14').html(data.publish_time14);
				$('#img15').attr("src", data.avt15);
				$('#a15').html(data.title15);
				$('#a15').attr("href","http://localhost:8080/blog_content?id="+data.id15);
				$('#s15').html(data.publish_time15);
				$('#img16').attr("src", data.avt16);
				$('#a16').html(data.title16);
				$('#a16').attr("href","http://localhost:8080/blog_content?id="+data.id16);
				$('#s16').html(data.publish_time16);
				$('#img17').attr("src", data.avt17);
				$('#a17').html(data.title17);
				$('#a17').attr("href","http://localhost:8080/blog_content?id="+data.id17);
				$('#s17').html(data.publish_time17);
				$('#img18').attr("src", data.avt18);
				$('#a18').html(data.title18);
				$('#a18').attr("href","http://localhost:8080/blog_content?id="+data.id18);
				$('#s18').html(data.publish_time18);
				$('#img19').attr("src", data.avt19);
				$('#a19').html(data.title19);
				$('#a19').attr("href","http://localhost:8080/blog_content?id="+data.id19);
				$('#s19').html(data.publish_time19);
				$('#img20').attr("src", data.avt20);
				$('#a20').html(data.title20);
				$('#a20').attr("href","http://localhost:8080/blog_content?id="+data.id20);
				$('#s20').html(data.publish_time20);

			});
		});
		$(function() {
			$('#writeblog').on(
					'click',
					function() {
						$.post('/blog_write', $('#write-form').serialize(),
								function(data) {
									alert(data);
									console.log(data);
								});
					});

			var ue = UE.getEditor('editor');
		});
		$(document).ready(function() {
			$(".hiding").click(function() {
				$(".box3").slideToggle(1000);
			});

		});
	</script>
</body>
</html>